
import React, {Component} from 'react';
import  Cayegory from './read/cayegory';
import  Recommend from './read/recommend';
import  List from './read/list';
import  Search from './read/search';
import  Topic from './read/topic';
import {Platform, StyleSheet, Text, View, ScrollView} from 'react-native';
import {Util,ifIphoneX} from "./util";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

class  Hr extends  Component<Props>{

  render() {
     return (
        <View>
          <View style={styles.hr}></View>
        </View>
     );
  }
}

export default class Read extends Component<Props> {
    static  navigationOptions={
        headerBackTitle: '阅读' // 设置返回此页面的返回按钮
    }
  constructor(props){
    super(props);
    const {navigation} = props;
    this.state = {
        isShow: false,
        navigation: navigation,
    }
  }
  render() {
    return (
        <View style={styles.container}>
          <Search style={styles.search}/>
          <Hr/>
          {
            this.state.isShow ?
                <ScrollView style={[styles.container,{paddingTop:10}]}>
                  <Topic data={this.state.recommendTopic} navigation={this.state.navigation} />
                    <Hr/>
                    <Recommend name="热门推荐" data={this.state.hotTopic} navigation={this.state.navigation} />
                    <Cayegory data={this.state.category} navigation={this.state.navigation}/>
                    <Hr/>
                    <Recommend name="清新一刻" data={this.state.other} navigation={this.state.navigation}/>
                    <View style={{height: 20}}></View>
                </ScrollView>
                : null
          }
        </View>
    );
  }
  // TODO: fecth data
  componentDidMount() {
      const that = this;
    Util.get('http://localhost:3000/data/read?type=config',function (data) {
       if (data.status === 1){
           let obj = data.data;
           let hotTopic = obj.hotTopic;
           let recommendTopic = obj.recommendTopic;
           let category = obj.category;
           let other = obj.other;
           that.setState({
               isShow: true,
               recommendTopic:recommendTopic,
               hotTopic:hotTopic,
               category:category,
               other:other,
           });
       }
    },function (err) {
        console.log(err);
    });
  }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        ...ifIphoneX({
            paddingTop: 14,
        },{
            paddingTop: 0,

        }),
    },

    hr:{
        borderColor: '#F0F0F0',
        borderWidth: Util.pixel,
        marginTop:10
    }
});